<template>
  <div class="login">
    <!-- <div class="logindiv">
      <div class="title"></div>
      <div class="username"></div>
      <div class="password"></div>
      <div class="loginbutton"></div>
    </div> -->
    <div class="login-wrap">
      <h1 class="title">登录</h1>
      <el-form :model="form" ref="form" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input
            placeholder="用户名"
            type="username"
            v-model="form.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item id="password" prop="pass">
          <el-input
            placeholder="密码"
            type="password"
            autocomplete="off"
            v-model="form.password"
            @keyup.enter.native="login"
          ></el-input>
        </el-form-item>
        <el-form-item class="login-btn">
          <el-button type="primary" @click="login">登 录</el-button>
        </el-form-item>
      </el-form>
      <div class="register-text">
        <div class="backHome" @click="goHome">返回主页</div>
        <div @click="gotoRegister" class="toRegister">注册账号</div>
      </div>
    </div>
  </div>
</template>

<style src="../assets/css/Login.css" scoped >
</style>

<script>
import { request } from "../network/request.js";
export default {
  name: "Login",
  data() {
    return {
      // is_login: true,
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    gotoRegister() {
      this.$router.push("/register");
    },
    goHome() {
      this.$router.push("/");
    },
    login() {
      console.log(this.form.username);
      console.log(this.form.password);
      if (!this.form.username || !this.form.password) {
        this.$message({
          message: "用户名或密码不能为空",
          type: "warning",
        });
        return;
      }
      request({
        url: "/login",
        data: {
          username: this.form.username,
          password: this.form.password,
        },
        method: "post",
      }).then((res) => {
        console.log(res);
        if (res.data.res == 0) {
          this.$message.error("用户名或密码错误");
          return;
        } else {
          this.$message({
            message: "恭喜你，登录成功！",
            type: "success",
          });
          this.$store.commit("login");
          // this.$store.commit("setUsername", this.username);

          this.$router.push("/index");
        }
      });
    },
  },
};
</script>